<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 16:08:02
-->
<template>
  <!--1. 容器 -->
  <div ref="right1_container" style="height: 95%"></div>
</template>
<script>

// 2. 导入图表构造函数
import { Area } from '@antv/g2plot';
import {get} from '../../../utils/request'
export default {
  data(){
      return{
        dd:[]
      }
    },
  async mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
   
      await this.loadData();
      this.initChart();
    
  },
  methods:{
    // 3. 初始化图表
    async loadData(){
      let url ="/count/countAll"
      let resp=await get(url);
      this.dd=resp.data;
    },
    initChart(){
      const data = this.dd;
      itemStyle : {  
                normal : {  
                	color: "red"//图例的颜色
                }  
            }
      const area = new Area(this.$refs.right1_container, {
        data,
        xField: 'type',
        yField: 'value',
        xAxis: {
          range: [0, 1],
          tickCount: 5,
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 12,
            }
          }
        },
        yAxis: {
          label: {
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 12,
            }
          }
        },
        areaStyle: () => {
          return {
            fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
          };
        },
      });
      area.render();
    }
  }
}
</script>